<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ act }}</h1>
        <h1>当前值为：{{ sum }}</h1>
        <h1>当前值放大10倍为：{{ bigSum }}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">和为奇数再加</button>
        <button @click="incrementWait(n)">等会加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
    export default {
        name:'Count',
        data(){
            return {
                n:1,
            }
        },
        computed:{
            //ES6语法  ...表示将数据展开为键值对形式
            //mapState的对象写法
            // ...mapState({
            //     sum:'sum',
            //     name:'name',
            //     act:'act'
            // }),
            //数组写法 当computed的名字和$store.state中的数据一样时可简写
            ...mapState(['sum','name','act']),

            //mapGetters的对象写法
            // ...mapGetters({bigSum:'bigSum'}),
             //数组写法 
             ...mapGetters(['bigSum'])
        },
        methods:{
            // increment(){
            //     // this.$store.dispatch('increment',this.n)
            //     this.$store.commit('INCREMENT',this.n)
            // },
            // decrement(){
            //     // this.$store.dispatch('decrement',this.n)
            //     this.$store.commit('DECREMENT',this.n);
            // },
            // incrementOdd(){
            //     this.$store.dispatch('incrementOdd',this.n)
            // },
            // incrementWait(){
            //     this.$store.dispatch('incrementWait',this.n)
            // },

            /***************************************************************************** */

            //mapperActions的对象写法    数组写法与上面类似，需要模板中用到的方法和this.$store.actions中的方法一致才可以简写
            ...mapActions({
                incrementOdd:'incrementOdd',
                incrementWait:'incrementWait'
            }),
            ...mapActions(['incrementOdd','incrementWait']),
            ...mapMutations({
                increment:'INCREMENT',
                decrement:'DECREMENT'
            })
        },
    }
</script>

<style scoped>
    button {
        margin-left: 6px;
    }
</style>